<template>
	<div class="page">
		<div class="top-name">数据统计</div>
		<div class="row-flex">
			<div class="row-flex-items">
				<div class="items-icon">
					<img src="@/assets/1.png" alt="" />
				</div>
				<div class="items-title">
					<div class="items-title-name">总点击数</div>
					<div class="items-title-num">{{ dataObj.totalCount }}</div>
				</div>
			</div>
			<div class="row-flex-items row-flex-left">
				<div class="items-icon">
					<img src="@/assets/2.png" alt="" />
				</div>
				<div class="items-title">
					<div class="items-title-name">本月点击数</div>
					<div class="items-title-num">{{ dataObj.monthCount }}</div>
				</div>
			</div>
			<div class="row-flex-items row-flex-left">
				<div class="items-icon">
					<img src="@/assets/3.png" alt="" />
				</div>
				<div class="items-title">
					<div class="items-title-name">今日点击数</div>
					<div class="items-title-num">{{ dataObj.dayCount }}</div>
				</div>
			</div>
			<div class="row-flex-items row-flex-left">
				<div class="items-icon">
					<img src="@/assets/4.png" alt="" />
				</div>
				<div class="items-title">
					<div class="items-title-name">总链接数</div>
					<div class="items-title-num">{{ dataObj.totalSize }}</div>
				</div>
			</div>
			<div class="row-flex-items row-flex-left">
				<div class="items-icon">
					<img src="@/assets/5.png" alt="" />
				</div>
				<div class="items-title">
					<div class="items-title-name">活跃链接</div>
					<div class="items-title-num">{{ dataObj.useSize }}</div>
				</div>
			</div>
		</div>
		<el-row>
			<el-col :span="4">
				<div class="top-name">近10日点击数据分析</div>
			</el-col>

			<el-col :span="4" style="margin-left: 20px;">
				<!-- wzyk 新增，根据链接展示数据 -->
				<el-cascader :options="options" :props="{ checkStrictly: true }" clearable
					placeholder="默认全部链接" @change="repaint"></el-cascader>
				<!-- wzyk 新增，根据链接展示数据 -->
			</el-col>
			
			<el-col :span="4" style="margin-left: 20px;">
				<el-button type="primary" @click="analyze">分析</el-button>
			</el-col>
		</el-row>

		<div class="echaets">
			<Echarts :echartsData="echartsData"/>
		</div>
		<div class="top-name">链接点击数TOP 6</div>
		<div class="top6">
			<div class="top6-items" v-for="(item,index) in dataObj.topList" :key="index">
				<el-row>
					<el-col :span="4">
						<div class="top-iccid">链接名称：{{ item.name }}</div>
					</el-col>
					<el-col :span="4">
						<span class="top-iccid">总点击数：{{item.totalSize}}</span>
					</el-col>
				</el-row>
				<el-progress :percentage="parseInt(item.totalSize/topCount*100)"></el-progress>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		countData
	} from '@/api/home.js'
	import {
		getNextAgentOpts
	} from '@/api/options.js'
	import Echarts from './Echarts'
	import common from '@/utils/common.js'
	export default {
		data() {
			return {
				dataObj: {},
				echartsData: {
					xData: [],
					sData: []
				},
				topCount: 0,

				opData: {},
				// options: [{
				// 	value: 'zhinan',
				// 	label: '指南',
				// 	children: [{
				// 		value: 'shejiyuanze',
				// 		label: '设计原则',

				// 	}, {
				// 		value: 'daohang',
				// 		label: '导航',

				// 	}],
				// }]
				options: [],
				analyze_condition: []

			}
		},
		components: {
			Echarts
		},
		created() {
			let that = this;
			that.init();

		},
		methods: {
			init() {
				let that = this;
				countData({}).then(res => {
					that.dataObj = res.data.data
					res.data.data.dataList = res.data.data.dataList.reverse();
					// console.log(res.data.data.dataList);
					that.echartsData.xData = res.data.data.dataList.map(item => {
						return item.count
					})

					that.echartsData.sData = res.data.data.dataList.map(item => {
						return item.time
					})
					for (var i = 0; i < that.dataObj.topList.length; i++) {
						that.topCount += that.dataObj.topList[i]["totalSize"];
					}
				})
				that.set_opt_1();
				// getNextAgentOpts(that.opData).then(res => {
				// 	that.set_opt_1(res.data.data.resultList);
				// })
			},

			set_opt_1() {
				let that = this;
				common.sysRequest('tiktok/nearlyClickUrls',{}, 'get').then(res => {
					if (res.data.code === "200") {
						that.options = res.data.data
					}
				});
			},
			repaint(value){
				let that = this;
				that.analyze_condition = value;
			},
			analyze(){
				let that = this;
				common.sysRequest('tiktok/get/count/data/condition', {"data": that.analyze_condition}, 'post').then(res=>{
					// console.log(res.data.data);
					that.echartsData.xData = res.data.data.map(item => {
						return item.count
					})
					that.echartsData.sData = res.data.data.map(item => {
						return item.time
					})
				})
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		height: 100%;
		width: calc(100% - 40px);
		padding: 20px;
		background: #F3F5F9;

		.top-name {
			height: 24px;
			font-size: 18px;
			font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
			font-weight: bold;
			color: #19213F;
			line-height: 24px;
		}

		.row-flex {
			margin-top: 14px;
			margin-bottom: 35px;
			display: flex;

			.row-flex-items {
				width: calc(100% / 5);
				height: 85px;
				background: #FFFFFF;
				border-radius: 8px;
				display: flex;

				.items-icon {
					margin: 20px 0px 20px 20px;

					img {
						width: 46px;
						height: 46px;
					}
				}

				.items-title {
					margin-top: 17px;
					margin-left: 9px;

					.items-title-name {
						height: 19px;
						font-size: 14px;
						font-family: MicrosoftYaHei;
						color: #636C88;
						line-height: 19px;
					}

					.items-title-num {
						height: 28px;
						font-size: 20px;
						font-family: OPPOSans20_Medium;
						color: #19213F;
						line-height: 28px;
					}
				}
			}

			.row-flex-left {
				margin-left: 16px;
			}
		}

		.echaets {
			height: 356px;
			background: #FFFFFF;
			border-radius: 8px;
			margin-top: 14px;
			margin-bottom: 35px;
		}

		.top6 {
			margin-top: 14px;
			background: #FFFFFF;
			border-radius: 8px;
			padding: 20px;

			.top6-items {
				margin-top: 20px;
			}

			.top-iccid {
				height: 19px;
				font-size: 14px;
				font-family: MicrosoftYaHei;
				color: #636C88;
				line-height: 19px;
			}
		}
	}
</style>